<template>
  <div>
    <el-form
      class="filter-container"
      ref="searchData"
      :model="searchData"
      label-width="85px"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="敞口号">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.exposure_no"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="品名">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.commodity"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchData.created_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width:100%;"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            style="margin-top:5px"
            @click="search"
          >
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      fit
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column
        prop="exp_vol"
        label="敞口数量"
        sortable
      ></el-table-column>
      <el-table-column
        prop="matchable_amount"
        label="可匹配数量"
        sortable
      ></el-table-column>
      <el-table-column prop="name" label="品名" sortable></el-table-column>
      <el-table-column prop="deal_no" label="合同号" sortable></el-table-column>
      <el-table-column
        prop="exposure_no"
        label="敞口号"
        sortable
      ></el-table-column>
      <el-table-column
        prop="exp_type"
        label="敞口类型"
        sortable
      ></el-table-column>
      <el-table-column prop="direction" label="方向" sortable></el-table-column>
      <el-table-column
        prop="invoice_vol"
        label="单据数量"
        sortable
      ></el-table-column>
      <el-table-column prop="price" label="价格" sortable></el-table-column>
      <el-table-column prop="brand" label="品牌" sortable></el-table-column>
      <el-table-column prop="origin" label="产地" sortable></el-table-column>
      <el-table-column prop="standard" label="规格" sortable></el-table-column>
      <el-table-column
        prop="attribute"
        label="主属性"
        sortable
      ></el-table-column>
      <el-table-column prop="remark" label="备注" sortable></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeBtn()" size="mini">选择</el-button>
    </div>
  </div>
</template>
<script>
import { spotExposureMatch } from "@/api/url_info.js";
export default {
  //现货敞口
  name: "exposureSpot",
  props: ["closeValue", "hedgingMethod", "unable"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        exposure_no: "",
        commodity: "",
        created_time: "",
        exp_type: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let that = this;
      console.log("1111", that.hedgingMethod);
      if (that.hedgingMethod.hedging_method == "逐笔套") {
        that.searchData.exp_type = "0";
      } else if (that.hedgingMethod.hedging_method == "滚动套") {
        that.searchData.exp_type = "1";
      }
      await spotExposureMatch(that.searchData)
        .then(res => {
          that.tableData = [];
          let data = res.result.results;
          that.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            that.tableData[i] = {
              exposure_no: data[i]["exposure_no"],
              exp_type: data[i]["exp_type"],
              direction: data[i]["direction"],
              name: data[i]["commodity"].name,
              deal_no: data[i]["deal_no"],
              invoice_vol: data[i]["invoice_vol"],
              exp_vol: data[i]["exp_vol"],
              price: data[i]["price"],
              remark: data[i]["remark"],
              matchable_amount: data[i]["matchable_amount"],
              brand: data[i]["commodity"].commodity_spot[0].brand,
              origin: data[i]["commodity"].commodity_spot[0].origin,
              standard: data[i]["commodity"].commodity_spot[0].standard,
              attribute: data[i]["commodity"].commodity_spot[0].attribute
            };
          }
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    //禁选
    checkSelectable(row, rowIndex) {
      let arr = [];
      for (let i in this.unable) {
        arr.push(this.unable[i].exposure_no);
      }
      if (
        arr.some(el => {
          return el === row.exposure_no;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },
    //每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.getData();
    },
    //当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.getData();
    },
    //选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.getData();
    },
    closeBtn() {
      if (this.closeValue == "exposureSpot") {
        this.$emit("closeSpot", this.multipleSelection);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-left: 90%;
}
</style>
